<template>
  <div class="chart" ref="historyCivilExamAverageChart"></div>
</template>

<script>
import { reqCommonHeat } from '@/api/chart.js';
export default {
  name: 'historyCivilExamAverageChart',
  props: {
    name: {
      type: String,
      default: '全国'
    },
    xData: {
      type: Array,
      default: () => []
    },
    yData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },
  watch: {
    xData: {
      handler(newVal, oldVal) {
        this.init();
      },
      deep: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    init() {
      if (!this.$refs['historyCivilExamAverageChart']) return;
      this.myChart = this.$echarts.init(
        this.$refs['historyCivilExamAverageChart']
      );

      let option = {
        title: {
          text: `历年国考报名人数（${this.name}）`,
          textStyle: {
            fontWeight: 'bolder',
            fontSize: '16px',
            color: '#242F57'
          }
        },
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // type: 'cross',
            label: {},
            lineStyle: {
              color: '#D3D3D9'
            },
            crossStyle: {
              color: '#D3D3D9'
            }
          },
          formatter: (params) => {
            return (
              "<div style='background: rgba(174, 210, 240, 0.05);border-radius: 4px;border: 1px solid #b4d3f1;margin: -13px;padding: 10px;backdrop-filter: blur(10px);'>" +
              '<span style="display: inline-block;background: #369AFE;margin-right: 7px; width: 8px;height: 8px;border-radius: 50%;"' +
              params[0].marker +
              '</span>' +
              '报名人数' +
              '<br>' +
              '<span style="color: #222222;font-size: 18px;font-family: D-DIN-PRO-800-ExtraBold;padding: 4px 0;margin-left: 14px">' +
              params[0].value +
              '</span>' +
              '<span style="color: #333333;font-size: 16px;margin-left: 4px">万</span>' +
              '<br>' +
              '<span style="color: #333333;font-size: 14px;margin-left: 14px">' +
              '截止' +
              params[0].name +
              '</span>' +
              '</div>'
            );
          }
        },
        color: ['#369AFE'],
        grid: {
          left: '6px',
          right: '2%',
          bottom: '4px',
          top: '25%',
          containLabel: true
        },
        xAxis: {
          name: '',
          nameTextStyle: {
            color: '#8193B2',
            fontSize: '14',
            padding: [17, 0, 0, 5],
            verticalAlign: 'top'
          },
          nameGap: 8,
          type: 'category',
          boundaryGap: true,
          data: this.xData,
          axisTick: {
            show: false
          },
          axisLabel: {
            inside: false,
            margin: 2,
            textStyle: {
              color: '#8193B2', // x轴颜色
              fontWeight: '400',
              fontSize: '12',
              fontFamily: 'PingFangSC'
            },
            formatter: function (params) {
              return params.slice(5) + '\n' + params.slice(0, 4);
            }
          },
          axisLine: {
            //坐标轴轴线相关设置
            lineStyle: {
              color: '#EAEDF7'
            }
          }
        },
        yAxis: {
          name: '人数（万）',
          nameTextStyle: {
            color: '#8193B2',
            fontSize: '14',
            padding: [0, -12, 0, 0]
          },
          nameGap: 20,
          type: 'value',
          axisTick: {
            show: false
          },
          minInterval: 1,
          axisLabel: {
            textStyle: {
              color: '#8193B2', // x轴颜色
              fontWeight: '400',
              fontSize: '12',
              fontFamily: 'PingFangSC'
            },
            axisLabel: {
              formatter: '{value} 元'
            }
          }
        },
        series: [
          {
            name: '报名人数',
            symbol: 'none',
            type: 'line',
            smooth: true,
            data: this.yData,
            showSymbol: false,
            symbol: 'circle',
            symbolSize: 17,
            itemStyle: {
              normal: {
                // color: '#7052ff',
                borderColor: '#fff', //拐点边框颜色
                borderWidth: 3 //拐点边框大小
              }
            },
            zlevel: 100, // 设置圆圈的优先级高于虚线
            lineStyle: {
              // color: '#7052FF',
              width: 2
            }
          }
        ]
      };

      option && this.myChart.setOption(option);
      window.addEventListener('resize', () => {
        if (this.myChart) {
          this.myChart.resize();
        }
      });
      this.myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: 1
      });
    },
    onIndustryChange(val) {
      if (val && val.length) {
        this.selectedIndustryList = [];
        val.forEach((item) => {
          this.selectedIndustryList.push(item.split('-')[0]);
        });
      } else {
        this.selectedIndustryList = [];
      }
      this.fetchData();
    },
    handleDateChange(val) {
      if (this.isSetDeaultTime) {
        this.isSetDeaultTime = false;
        return;
      }
      this.pickerMinDate = null;
      this.fetchData();
    }
  }
};
</script>

<style scoped lang="scss">
.chart {
  height: 100%;
  width: 100%;
  color: #b4d3f1;
  background: rgba(174, 210, 240, 0.05);
}
</style>
